<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      title="站内链接"
      width="900px"
      @close="close"
    >
      <el-row v-if="dialogVisible" :gutter="20">
        <el-col :span="4">
          <el-menu :default-active="form.insideParams.insidePageType" @select="handleMenuSelect">
            <el-menu-item v-for="item in insideLinkPageTypeOptions" :key="item.key" :index="item.key">{{ item.label }}
            </el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="20">
          <div class="right-container">
            <!-- 我的页面 -->
            <div v-if="form.insideParams.insidePageType === 'MYPAGE'" class="my-page-box">
              <MyPage :row="form" @selectInsideLink="selectInsideLink" />
            </div>

            <!-- 系统页面 -->
            <div v-if="form.insideParams.insidePageType === 'SYSTEMPAGE'" class="system-page-box">
              <SystemPage :row="form" @selectInsideLink="selectInsideLink" />
            </div>

            <!-- 商品详情 -->
            <div v-if="form.insideParams.insidePageType === 'GOODSDETAIL'" class="goods-detail-box">
              <GoodsList :row="form" @selectInsideLink="selectInsideLink" />
            </div>
            <!-- 券列表 -->
            <div v-if="form.insideParams.insidePageType === 'COUPON'" class="coupon-box">
              <CouponList :row="form" @selectInsideLink="selectInsideLink" />
            </div>
            <!-- 商城店铺 -->
            <div v-if="form.insideParams.insidePageType === 'SHOPMALL'" class="mall-box">
              <ShopMallList :row="form" @selectInsideLink="selectInsideLink" />
            </div>
            <!-- 积分商品 -->
            <div v-if="form.insideParams.insidePageType === 'POINTGOODSDETAIL'" class="goods-detail-box">
              <PointGoodsList :row="form" @selectInsideLink="selectInsideLink" />
            </div>
          </div>
        </el-col>
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" round @click="hide">取 消</el-button>
        <el-button size="small" round type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import wxaBuildConfig from '@/views/wxaBuildModule/config'
import MyPage from './components/MyPage'
import SystemPage from './components/SystemPage'
import GoodsList from './components/GoodsList'
import CouponList from './components/CouponList'
import ShopMallList from './components/ShopMallList'
import PointGoodsList from './components/PointGoodsList'

export default {
  components: {
    MyPage,
    SystemPage,
    GoodsList,
    CouponList,
    ShopMallList,
    PointGoodsList
  },
  data() {
    return {
      // 配置
      insideLinkPageTypeOptions: [],
      resolve: null,
      reject: null,
      // 状态
      dialogVisible: null,
      // 数据
      classifyCode: 'DEFAULT',
      form: {
        insideParams: {
          insidePageType: 'MYPAGE',
          commonCode: null,
          pageId: null,
          goodsSerial: null,
          remark: null
        }
      }
    }
  },

  methods: {
    /**
     * 弹框相关
     */
    open({ row }) {
      console.log(row)
      // 侧边栏
      this.insideLinkPageTypeOptions =
          wxaBuildConfig[this.classifyCode].insideLinkPageType
      // 初始化数据
      const defaultForm = JSON.parse(JSON.stringify(row))
      if (!defaultForm.insideParams) {
        defaultForm.insideParams = {
          insidePageType: 'MYPAGE',
          commonCode: null,
          pageId: null,
          goodsSerial: null,
          remark: null
        }
      }
      defaultForm.insideParams.insidePageType = defaultForm.insideParams.insidePageType || 'MYPAGE'
      defaultForm.insideParams.commonCode = defaultForm.insideParams.commonCode || null
      this.form = defaultForm
      this.show()
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    show() {
      this.dialogVisible = true
    },

    close() {
      // Object.assign(this.$data, this.$options.data())
      this.form = {
        insideParams: {
          insidePageType: 'MYPAGE',
          commonCode: null,
          pageId: null,
          goodsSerial: null,
          remark: null
        }
      }
    },

    hide() {
      this.resolve = null
      this.reject = null
      this.dialogVisible = false
    },

    /**
     * 数据组
     */

    /**
     * 按钮组
     */
    // 选择菜单
    handleMenuSelect(key, keyPath) {
      this.form.insideParams.insidePageType = key
    },

    // 选择链接回调
    selectInsideLink(data) {
      console.log('选择回调', data)
      this.form.insidePage = data.params.insidePage
      this.form.insideParams.pageId = data.params.insideParams.pageId || null
      this.form.insideParams.goodsSerial = data.params.insideParams.goodsSerial || null
      this.form.insideParams.commonCode = data.params.insideParams.commonCode || null
      this.form.insideParams.remark = data.params.insideParams.remark || null
      this.form.mode = data.params.mode
      this.form.path = data.params.path
    },

    // 确 定
    submit() {
      console.log(this.form)
      this.resolve && this.resolve(this.form)
      this.hide()
    }

    /**
     * 状态组
     */

    /**
     * 方法组
     */
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
/* 右侧容器 */
.right-container {
  max-height: 700px;
  overflow: auto;
}
</style>
